<template>
   <el-header>
      <el-row :gutter="0">
        <el-col :span="3" :xs="3" :sm="3" :md="3" :lg="3" class="header-logo"><span>SD后台</span></el-col>
        <el-col :span="21" :xs="21" :sm="21" :md="21" :lg="21">
          <div class="user-info">
            <div class="can-work">
              <el-dropdown trigger="hover" @command="handleCommand">
                <span class="el-dropdown-link-2">
                  <img class="user-icon-small" :src="avatar" alt="头像">
                  <span class="user_name">{{ username }}</span>
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="changePwd">重置密码</el-dropdown-item>
                  <el-dropdown-item command="Logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-header>
</template>

<script>
import {userLogout} from '@/backend/api/login.js'
export default {
    name: 'Header',
    data() {
        return {
          avatar: '',
          username: '管理员'
        }
    },
    created () {
      this.avatar = this.$store.state.user.avatar,
      this.username = this.$store.state.user.name
    },
    methods: {
      handleCommand(command) {
        if (command == 'changePwd') {
          console.log(1111)
          this.$parent.$parent.changePwd = true
        } else if(command == 'Logout') {
          userLogout().then(res => {
            if (res.status == 0) {
                this.$store.dispatch('logout', res.data)
                // this.$store.commit('DELETE_USER')
                this.$router.push('/login')
            } else {
              this.$message({
                message: '退出失败',
                type: 'warning',
                duration: 1500,
                });
            }
          });
        }
        // this.$parent.changePwd = true
        // console.log(this.$parent.changePwd)
      },
      
    }
}
</script>

<style lang="scss">

</style>


